<template>
  <div class="accompanyDetailsContend">
    <div class="container">
      <section class="schoolDetails">
        <div class="topTitleTab">
          <span
            >当前位置：首页 > {{ typeText }} > {{ details.coachInfo.name }}</span
          >
        </div>
        <!-- 驾校信息 -->
        <section class="schoolinfo">
          <div class="left">
            <img :src="details.coachInfo.head_img" alt="" />
          </div>
          <div class="mid">
            <div class="schoolinfoTitle">
              <span class="title titleColor">{{ details.coachInfo.name }}</span>
              <span class="addcolor">{{ details.coachInfo.schoolTitle }}</span>
            </div>
            <div class="group">
              <div class="groupItem">
                <span class="money">{{ details.coachInfo.pCost }}</span>
              </div>
              <div class="starBox">
                <img
                  src="~/assets/images/rankstar.png"
                  alt=""
                  v-for="num in details.coachInfo.ccAvg"
                  :key="num"
                />
                <img
                  v-if="details.coachInfo.ccAvg < 5"
                  src="~/assets/images/rankstarhui.png"
                  alt=""
                  v-for="(hui, huii) in 5 - details.coachInfo.ccAvg"
                  :key="huii"
                />
                <span class="tips">点评{{ details.coachInfo.ccCount }}条</span>
              </div>
              <!-- <div class="groupItem">
                <img src="~/assets/images/tel.png" alt="" />
                <span>18323232323235</span>
              </div> -->
            </div>
            <div class="group">
              <div class="groupItem">
                <img src="~/assets/images/people.png" alt="" />
                <span>学员数量：{{ details.coachInfo.crCount }}人</span>
              </div>
              <div class="groupItem">
                <img src="~/assets/images/time.png" alt="" />
                <span>教龄：{{ details.coachInfo.drive_age }}年</span>
              </div>
            </div>

            <div class="group">
              <div class="groupItem">
                <img src="~/assets/images/localhui.png" alt="" />
                <span>{{ details.coachInfo.sub_three_addr }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <el-button type="primary">免费咨询</el-button>
          </div>
        </section>

        <!-- 表格区 -->
        <section class="tableBox">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="教练简介" name="bx">
              <div class="tab-pane-contend">

                  <span class="tips" v-if="details.coachInfo.profile">
                    {{ details.coachInfo.profile }}
                  </span>
                  <div class="nodataBox" v-else>
                  <img src="~/assets/images/nodata.png" alt="">
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="学员点评" name="bc">
              <div class="tab-pane-contend">
                <div
                  class="comment"
                  v-for="(item, i) in details.comment.list"
                  :key="i"
                  v-if="details.comment.list.length>0"
                >
                  <div class="leftImg">
                    <div class="imgbox">
                      <el-image
                        :src="
                          item.userInfo && item.userInfo.head_img
                            ? item.userInfo.head_img
                            : require('~/assets/images/peopleMr.png')
                        "
                        :preview-src-list="
                          item.userInfo && item.userInfo.head_img
                            ? [item.userInfo.head_img]
                            : [require('~/assets/images/peopleMr.png')]
                        "
                      >
                      </el-image>
                    </div>
                    <span class="tips">{{
                      item.userInfo && item.userInfo.nickname
                        ? item.userInfo.nickname
                        : "匿名"
                    }}</span>
                  </div>
                  <div class="right">
                    <div class="starBox">
                      <span class="tips">评分：</span>
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in item.score"
                        :key="num"
                      />

                      <img
                        v-if="item.score < 5"
                        src="~/assets/images/rankstarhui.png"
                        alt=""
                        v-for="num in 5 - item.score"
                        :key="num"
                      />
                    </div>
                    <p>{{ item.content }}</p>
                    <span class="tips">时间：{{ item.update_time }}</span>
                  </div>
                </div>
                <div class="nodataBox" v-if="details.comment.list.length==0">
                  <img src="~/assets/images/nodata.png" alt="">
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </section>
      </section>
    </div>
  </div>
</template>
<script>
import { coachDetail } from "~/api/commen";
export default {
  components: {},
  data() {
    return {
      matchingList: [
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
        { url: require("~/assets/images/a.jpg"), title: "班车" },
      ],
      activeName: "bx",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  async asyncData({ app, query, params }) {
    let coachId = query.coachId;
    let typeText = query.typeText;
    let details = await coachDetail({ coachId: coachId });

    return {
      details: details,
      typeText: typeText == 1 ? "陪练" : "教练",
    };
  },
  methods: {
    handleClick(tab, event) {

    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/accompanyDetails.scss";
::v-deep {
  .el-tabs__nav-scroll {
    padding: 0 30px;
  }
  .el-tabs__nav {
    display: flex;
    align-items: center;
    height: 62px;
    line-height: 62px;
    .el-tabs__item {
      text-align: center;
      font-size: 18px;
      padding: 0 40px;
    }
  }

  .el-table th {
    background-color: #f2f2f2 !important;
    color: #3a3a3a;
    font-size: 16px;
  }
  .cell {
    color: #6d6d6d;
    font-size: 14px;
  }
}
</style>